<template>
  <div class="breadcrumb">
    <!-- vue 中 template 标签用作整合标签结构，但渲染时不作为真实标签出现的特殊容器标签 -->
    <template v-for="(v, i) in menus">
      <span :key="v">{{ v }}</span>
      <template v-if="i < menus.length - 1"> / </template>
    </template>
  </div>
</template>

<script>
export default {
  // props: ["menus"],
  // props的数据校验，不是给用户提示的，而是给程序员提示的
  props: {
    menus: {
      type: Array,
      required: true,
    },
  },
  // data() {
  //   return {
  //     menus: ["🏠", "购物车"],
  //   };
  // },
};
</script>

<style scoped>
.breadcrumb {
  font-size: 16px;
  color: gray;
}
.breadcrumb > span {
  /* border: 1px solid black; */
}
</style>
